<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{message}}
</div>
<div id="app02">
    {{message}}
</div>
</body>
<script src="js/vue.js"></script>
<script>
    // 一个Vue实例只能挂载到一个视图区域中
    let app = new Vue({
        el: '#app',
        data: {
            message: 'hello'
        },
        /*
            Vue的生命周期分为 init实例初始化、mount Vue实例挂载到视图中，
                update Vue实例中维护的数据通过操作虚拟DOM实时渲染到视图中，
                destroy Vue实例被销毁；
           Vue 4大生命周期对应 8个生命周期的钩子函数（钩子函数：预设的函数，在合适的时机中会自动调用）
               1、 beforeCreate() 在Vue实例初始化之前进行调用，由于此时Vue实例还未被初始化，
               调用该方法基本上没有什么意义，所以基本上不会使用该方法
               2、created() 在Vue实例初始化之后调用的钩子函数，此时Vue实例刚刚实现初始化，
               数据还未被挂载及渲染到视图中，我们可以调用该方法实现对数据的修改以及修改
               需要挂载的视图位置等功能
               3、beforeMount 在Vue实例初始化之后同时在视图挂载之前，由于此时还未将数据挂载到
               视图中，所以可以在本函数中修改数据的内容
               4、mounted 在Vue实例挂载之后执行的钩子函数，基本上会在需要更新页面数据时，编写
               该方法的逻辑
               5、beforeUpdate 在Vue数据挂载到视图后，只要是数据发生了变化，那么就一定会执行本函数，
               所以一定要注意，在本钩子函数中不能编写修改Vue实例模型的数据的代码，当然如果只是修改一次，
               将数据改为常量，那么可以编写，但如果每次调用都是不一样的变量那么不能修改；
               6、Updated 在Vue实例数据修改同时实时渲染到页面视图后 调用的钩子函数，可以在此处完成一些如
               数据次持久化，或将数据同步到其他程序的操作
               7、beforeDestroy 在Vue实例被销毁之前调用的函数，可以在本方法中编写一些清尾工作，如主动关闭某些资源；
               或在本函数中，主动实现数据持久化存储的效果
               8、destroyed 在Vue实例被销毁之后调用的函数，通常不使用
        */
        beforeCreate() {
            // 由于此时Vue实例还没有被初始化，所以无法访问到Vue实例对象内部的属性等内容，
            // 即无法对Vue实例内部的数据进行修改
            this.mssage = 'hello world';
            console.log('这是在Vue实例初始化之前调用的内容')
        },
        created() {
            // 通常在本函数中实现获取数据，实现数据初始化的功能
            this.message = '这里的数据被修改了，这里是created()钩子函数生效的效果'
            // 在本函数中，还可以通过 this.$mount('xx') 的方式修改需要挂载的视图
            this.$mount('#app02')
        },
        beforeMount() {
            this.message = '这里是beforeMount()函数生效的结果';
            // 不能在此方法中修改视图挂载相关的内容，即不能修改挂载的区域；
            // 否则将会循环往复的调用本方法，视图挂载前必然会执行本函数，
            // 而在本函数中修改视图挂载的内容必然又会调用本函数
            // this.$mount('#app')
        },
        mounted() {
            this.message = '这里是mounted()函数生效的结果';
            console.log('这里调用了mounted()函数')
        },
        beforeUpdate() {
            // 在Vue数据挂载到视图后，只要是数据发生了变化，那么就一定会执行本方法
            console.log('这里调用了beforeUpdate()函数')
            // 所以一定要注意，在本钩子函数中不能编写修改Vue实例模型的数据的代码
        }
    });
</script>
</html>